<template>
    <div class="item_list">

        <van-list v-model="loading"
                  :finished="finished"
                  :immediate-check="false"
                  finished-text="没有更多了"
                  @load="getGoodsList">
            <div class="h" v-bind:style="{ backgroundImage: 'url('+currentCategory.picUrl+')' }">
                <!--<div class="name">{{currentCategory.name}}</div>-->
                <!--<div class="desc">{{currentCategory.desc}}</div>-->
            </div>
            <van-tabs animated color="#E86489" swipeable sticky @click="onClick" v-if="category && category.length > 1">
                <van-tab v-for="(item, idx) in category" :key="idx" :title="item.name" :name="item.id"/>
            </van-tabs>
<!--            <van-card v-for="(item, i) in goodsList"-->
<!--                      :key="i"-->
<!--                      :desc="item.brief"-->
<!--                      :title="item.name"-->
<!--                      :thumb="item.picUrl"-->
<!--                      :price="item.retailPrice"-->
<!--                      :origin-price="item.counterPrice"-->
<!--                      @click="itemClick(item.id)"/>-->
            <van-row>
                <van-col span="12" v-for="(item, i) in goodsList"
                >
                    <div style=" padding:3px">
                        <div
                                :key="i"
                                style=" border-radius: 5px; background-color:#fff; overflow: hidden;padding: 5px"
                        >
                            <router-link :to="{ path: `/items/detail/${item.id}`}">
                                <img :src="item.picUrl" style="width: 100%;"/>
                                <p style="font-size: 12px; color: #999999; padding: 10px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                    {{item.name}}</p>
                                <div style="padding:15px 0px 0px 10px;position: relative;bottom: 10px; color:#000; font-size: 13px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                    ￥{{item.retailPrice}}
                                    <span>{{item.modelPrice ? '+' + item.modelPrice : ''}}</span>
                                    <s style="color:#cccccc;float: right;position: relative;right: 1px;font-size: 12px">原价￥{{item.counterPrice}}</s>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </van-list>
    </div>
</template>

<script>
    import {goodsCategory, goodsList} from '@/api/api';
    import {Card, List, Tab, Tabs} from 'vant';
    import request from '@/utils/request'

    export default {
        name: 'Item-list',
        props: {
            itemClass: {
                type: [String, Number],
                default: ''
            }
        },

        data() {
            return {
                categoryId: this.itemClass,
                goodsList: [],
                page: 0,
                limit: 10,
                category: [],
                currentCategory: {},
                // navList: [],
                // navActive: 0,
                loading: false,
                finished: false
            };
        },

        created() {
            this.init();
            this.getCates(this.categoryId)
        },

        methods: {
            onClick(thisId) {
                this.goodsList = []//每次请求把数组清空
                this.getGoodsList(thisId)
            },

            // handleTabClick(index) {
            //   this.categoryId = this.navList[index].id;
            //   this.$router.replace({
            //     name: 'category',
            //     query: { itemClass: this.categoryId }
            //   });
            //   this.init();
            // },
            init() {
                goodsCategory({id: this.categoryId}).then(res => {
                    this.navList = res.data.data.brotherCategory;
                    this.currentCategory = res.data.data.currentCategory;

                    // 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
                    if (res.data.data.parentCategory.id == this.categoryId) {
                        this.categoryId = res.data.data.currentCategory.id;
                    }

                    for (let i = 0; i < this.navList.length; i++) {
                        if (this.navList[i].id == this.categoryId) {
                            this.navActive = i;
                            break;
                        }
                    }
                    this.page = 0;
                    this.goodsList = [];
                    this.getGoodsList();
                });
            },
            async getCates(pid){
                const res = await request({
                    url: 'wx/category/sublist',
                    method: 'get',
                    params: {
                        pid
                    }
                })
                if(res && res.data){
                    this.category = [{id:0, name:'全部'}].concat(res.data.data.list);
                }
            },
            getGoodsList(cateId) {
                this.page++;
                goodsList({
                    categoryId: cateId ? cateId : this.categoryId,
                    page: this.page,
                    limit: this.limit
                }).then(res => {
                    this.goodsList.push(...res.data.data.list);
                    this.loading = false;
                    this.finished = res.data.data.page >= res.data.data.pages;
                });
            },
            itemClick(id) {
                this.$router.push(`/items/detail/${id}`);
            }
        },

        components: {
            [List.name]: List,
            [Card.name]: Card,
            [Tab.name]: Tab,
            [Tabs.name]: Tabs
        }
    };
</script>

<style lang="scss" scoped>
    .item_list {
        /*background-color: #fff;*/
    }

    .h {
        height: 100px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*background-image: url("./girlshirt.png");*/
        -webkit-background-size: 100%;
        background-size: 100%;
    }

    .h .name {
        display: block;
        height: 30px;
        margin-bottom: 10px;
        font-size: 20px;
        color: #ffffff;
    }

    .h .desc {
        display: block;
        height: 24px;
        font-size: 16px;
        color: #ffffff;
    }
</style>
